<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorate="~{manage/layout}" lang="zh">
<head>
    <title>组织人员管理</title>
</head>
<body>
<div layout:fragment="main-container" class="main-container" style="width: 600px;overflow: hidden;min-width: 600px;">
    <div class="mdc-layout-grid mdc-layout-grid-dialog__fixed" th:fragment="main-container">
        <form id="formMember" class="mdc-panel__padding-16" onsubmit="void(0);">
            <input th:if="${_csrf!=null}" type="hidden"
                   th:name="${_csrf.parameterName}"
                   id="_csrf"
                   th:value="${_csrf.token}"/>
            <input type="hidden" th:if="${member ne null}" th:value="${member.id}" name="id">
            <div class="mdc-layout-grid__inner mdc-panel__margin-16 mdc-form-field">
                <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12" tabindex="0">
                    <!--所属组织-->
                    <div class="mdc-select mdc-select--disabled select-width-fixed" data-mdc-auto-init="MDCSelect">
                        <input type="hidden" name="organizeId" required data-validtip="所属组织不能为空">
                        <i class="mdc-select__dropdown-icon"></i>
                        <!-- 预选 -->
                        <div class="mdc-select__selected-text"
                             th:text="${organize.name}"
                             th:data-value="${organize.id}"></div>
                        <div class="mdc-select__menu mdc-menu mdc-menu-surface select-width-fixed">
                            <ul class="mdc-list">
                                <li class="mdc-list-item mdc-list-item--selected"
                                    th:data-value="${organize.id}"
                                    th:text="${organize.name}"></li>
                            </ul>
                        </div>
                        <span class="mdc-floating-label mdc-floating-label--float-above">所属组织</span>
                        <div class="mdc-line-ripple"></div>
                    </div>
                    <!--人员-->
                    <div class="mdc-panel__margin-16" id="selectMember">
                        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field-row"
                             data-mdc-auto-init="MDCTextField">
                            <input type="text" id="memberIds" name="memberIds" class="mdc-text-field__input pointer"
                                   maxlength="20"
                                   required
                                   data-validtip="人员不能为空"
                                   autocomplete="off"
                                   placeholder="请点击选择成员"
                                   th:attr="data-value=${member ne null ? member.id : ''}"
                                   th:value="${member ne null ? member.name : ''}">
                            <div class="mdc-notched-outline">
                                <div class="mdc-notched-outline__leading"></div>
                                <div class="mdc-notched-outline__notch">
                                    <label for="memberIds" class="mdc-floating-label">人员</label>
                                </div>
                                <div class="mdc-notched-outline__trailing"></div>
                            </div>
                        </div>
                        <div class="mdc-text-field-helper-line">
                            <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg">
                                *必填</p>
                            <div class="mdc-text-field-character-counter">0 / 20</div>
                        </div>
                    </div>
                    <!--岗位-->
                    <div class="mdc-select select-width-fixed" data-mdc-auto-init="MDCSelect">
                        <input type="hidden" name="postId" required data-validtip="请选择岗位">
                        <i class="mdc-select__dropdown-icon"></i>
                        <!-- 预选 -->
                        <div class="mdc-select__selected-text"
                             th:text="${member ne null and member.post ne null ? member.post.name :'请选择岗位'}"
                             th:data-value="${member ne null and member.post ne null ? member.postId :'-1'}"></div>
                        <div class="mdc-select__menu mdc-menu mdc-menu-surface select-width-fixed">
                            <ul class="mdc-list">
                                <li th:class="|mdc-list-item${id eq null ? ' mdc-list-item--selected':''}|"
                                    data-value="-1"
                                    th:text="请选择岗位"></li>
                                <li th:each="p:${organize.posts}"
                                    th:class="|mdc-list-item${member ne null and p.id eq member.postId ? ' mdc-list-item--selected':''}|"
                                    th:data-value="${p.id}"
                                    th:text="${p.name}"></li>
                            </ul>
                        </div>
                        <span class="mdc-floating-label mdc-floating-label--float-above">请选择岗位</span>
                        <div class="mdc-line-ripple"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript" th:inline="javascript">
      $(function() {
        let id = [[${post ne null ? post.id:''}]];
        // 初始化input计数器
        new mdc.textField.MDCTextFieldCharacterCounter(document.querySelector('.mdc-text-field-character-counter'));

        // 选择成员弹窗
        $('#selectMember').on('click', function() {
          // let tableContainer = $('#mdc-data-table');
          // tableContainer.children('table').remove();
          // tableContainer.children('.pagination-container').remove();
          let mdcDataTableContainer = $(
              `<div id="mdc-data-table" class="mdc-data-table__container mdc-float__left data-table">
                    <div class="operator-container">
                        <div class="btn-container"></div>
                        <div class="search-container">
                            <div class="mdc-text-field text-field mdc-text-field--fullwidth mdc-text-field--no-label mdc-ripple-upgraded mdc-text-field--with-trailing-icon"
                                 data-mdc-auto-init="MDCTextField">
                                <input type="text" id="criteria" class="mdc-text-field__input"
                                       placeholder="请输入工号 | 名称 | 电话" autocomplete="off" data-enter-trigger="refreshTable">
                                <i class="material-icons mdc-text-field__icon" tabindex="0" role="button"
                                   id="searchBtn">search</i>
                                <div class="mdc-line-ripple"></div>
                            </div>
                        </div>
                    </div>
                  </div>`,
          );
          window.mdcDataTable = $.mdcDataTable({
            url: '/manage/manager/page',
            queryParams: {},
            container: mdcDataTableContainer,
            columns: [
              {
                data: 'empNo',
              },
              {
                data: 'name',
              },
              {
                data: 'genderDesc',
              },
              {
                data: 'phone',
              },
            ],
            thead: [
              {
                data: '工号',
                style: 'mdc-data-table__cell--non-numeric',
              },
              {
                data: '姓名',
                style: 'mdc-data-table__cell--non-numeric',
              },
              {
                data: '性别',
                style: 'mdc-data-table__cell--non-numeric',
              },
              {
                data: '电话',
                style: 'mdc-data-table__cell--non-numeric',
              },
            ],
            check: false,
            // 是否分页
            pagination: true,
            // 页面数据条数
            pageSize: 2,
            // 设置页面可以显示的数据条数
            pageList: [5, 10, 15, 20],
            // 首页页码
            pageNumber: 1,
            editable: false,
            onInitFinish: function() {
              // let popupHtml = tableContainer;
              // tableContainer.addClass('mdc-non-display');
              $.modal({
                title: '员工信息',
                content: mdcDataTableContainer,
                contentType: 2,
                openedCallback: function() {
                  window.mdcDataTable.fixBtnColor();
                },
              }, function(data) {
                console.log($.strFormat(' 选择成员: {}', JSON.stringify(data)));
              });
            },
            rowClick: function(row, data, index) {
              console.log($.strFormat('{},{}', JSON.stringify(row), index));
              mdcDataTableContainer.parents('.mdc-dialog__surface').find(
                  'button[data-mdc-dialog-action="yes"]').trigger('click');
            },
          });
          return false;
        });

        // 提交表单
        $('#editBtn').on('click', function() {
          let $form = $('#form');
          let data = {};
          $form.serializeArray().forEach(function(item) {
            data[item.name] = item.value;
          });
          let selects = $('.mdc-select input[name]');
          for (let i = 0; i < selects.length; i++) {
            let $input = $(selects[i]);
            let value = $input.val();
            let validTip = $input.attr('data-validtip');
            if (!value || Number(value) < 0) {
              $.alert(validTip, function() {
                $input.siblings('.mdc-select__selected-text').trigger('click');
              });
              return false;
            }
          }

          let textFields = document.querySelectorAll('.mdc-text-field');
          for (let i = 0; i < textFields.length; i++) {
            console.log(i, textFields[i]);
            let $input = $(new mdc.textField.MDCTextField(textFields[i]).input_);
            let value = $input.val();
            let required = Boolean($input.prop('required'));
            let minLength = $input.attr('minlength');
            let maxLength = $input.attr('maxlength');
            let validTip = $input.attr('data-validtip');
            let pattern = $input.attr('data-pattern');
            if (!$.valid(value, !required, minLength, maxLength, validTip || '参数校验失败', pattern)) {
              $input.focus();
              return false;
            }
          }
          data.organizeId = $('input[name=organizeId]').val();
          console.log(JSON.stringify(data));
          id > 0 ?
              $.put('/manage/post/' + id, data, function(res) {
                res.result === true ? $.alert(res.msg, function() {
                  window.location.href = '/manage/post/index';
                }) : $.alert(res.msg);
              }) : $.post('/manage/post', data, function(res) {
                res.result === true ? $.alert(res.msg, function() {
                  window.location.href = '/manage/post/index';
                }) : $.alert(res.msg);
              });
          return false;
        });
      });
    </script>
</div>
</body>
</html>
